<template>
  <div>
    <h2>用户管理</h2>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="-1"></el-tab-pane>
      <el-tab-pane label="微信公众号" name="微信公众号"></el-tab-pane>
      <el-tab-pane label="微信小程序" name="微信小程序"></el-tab-pane>
      <el-tab-pane label="H5" name="H5"></el-tab-pane>
      <el-tab-pane label="PC" name="PC"></el-tab-pane>
      <el-tab-pane label="APP" name="APP"></el-tab-pane>
    </el-tabs>
    <div class="main">
      <div class="order-time">
        <div class="search">
          <span>搜索:</span>
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
            style="width: 600px; margin-right: 500px"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="全部" value="全部"></el-option>
              <el-option label="姓名" value="姓名"></el-option>
              <el-option label="手机号" value="手机号"></el-option>
            </el-select>
          </el-input>
          <button @click="searchName">搜索</button>
          <button>重置</button>
        </div>
      </div>
      <div class="pay-method">
        <el-button :plain="true" @click="dialogTableVisible = true"
          >添加用户</el-button
        >
        <el-button :plain="true">发送优惠卷</el-button>
        <el-button :plain="true">批量设置分组</el-button>
        <el-button :plain="true">批量设置标签</el-button>
      </div>
      <el-dialog title="用户信息填写" :visible.sync="dialogTableVisible">
        <el-form :model="form2">
          <el-form-item label="真实姓名" :label-width="formLabelWidth">
            <el-input v-model="form2.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth">
            <el-input v-model="form2.phone" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="生日" :label-width="formLabelWidth">
            <el-input v-model="form2.surePwd" autocomplete="off"></el-input>
          </el-form-item> -->
          <div class="block" style="margin-bottom: 22px">
            <span
              class="demonstration"
              style="margin-left: 52px; margin-right: 40px"
              >生日</span
            >
            <el-date-picker
              v-model="form2.birthday"
              type="date"
              style="width: 685px"
            >
            </el-date-picker>
          </div>
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="form2.idCard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户地址" :label-width="formLabelWidth">
            <el-input v-model="form2.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" :label-width="formLabelWidth">
            <el-input v-model="form2.pwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" :label-width="formLabelWidth">
            <el-input v-model="form2.surePwd" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="用户等级" :label-width="formLabelWidth">
            <el-select v-model="form2.region" style="width: 100%">
              <el-option
                :label="item.explain"
                :value="item._id"
                v-for="item in systemData"
                :key="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户分组" :label-width="formLabelWidth">
            <el-select v-model="form2.organize" style="width: 100%">
              <el-option
                :label="item.name"
                :value="item._id"
                v-for="item in userGroup"
                :key="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户标签" :label-width="formLabelWidth">
            <el-select
              v-model="form2.logo"
              style="width: 100%"
              @change="subjectLevelOneChanged"
            >
              <el-option
                :label="item.name"
                :value="item._id"
                v-for="item in tag"
                :key="item._id"
              ></el-option>
            </el-select>
            <el-select v-model="form2.subjectId">
              <el-option
                v-for="subject in subjectTwoList"
                :key="subject._id"
                :label="subject.name"
                :value="subject._id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="资格推广:" :label-width="formLabelWidth">
            <el-radio v-model="spread" :label="true">启用</el-radio>
            <el-radio v-model="spread" :label="false">禁用</el-radio>
          </el-form-item>
          <el-form-item label="状态:" :label-width="formLabelWidth">
            <el-radio v-model="radio2" :label="1">开启</el-radio>
            <el-radio v-model="radio2" :label="0">锁定</el-radio>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser" style="width: 100%"
            >提交</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; max-height: 400px; overflow: auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="ID">
        <template slot-scope="scope">{{ scope.row._id }}</template>
      </el-table-column>

      <el-table-column label="头像" show-overflow-tooltip>
        <template slot-scope="scope">
          <img
            width="30"
            style="vertical-align: middle"
            :src="scope.row.avatar"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="姓名"> </el-table-column>
      <el-table-column prop="" label="付费会员">
        <span>否</span>
      </el-table-column>
      <el-table-column prop="level_id.name" label="用户等级"> </el-table-column>
      <el-table-column prop="group_id" label="分组"> </el-table-column>
      <el-table-column prop="phone" label="手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.phone | replaceNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="用户类型"> </el-table-column>
      <el-table-column prop="" label="余额">
        <span>0</span>
      </el-table-column>
      <el-table-column width="250" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleWrite(scope.row._id)"
            >编辑</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >更多</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 3, 6]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "-1",
      radio2: 1,
      spread: true,
      input3: "",
      select: "全部",
      tableData: [],
      multipleSelection: [],
      dialogTableVisible: false,
      currentPage: 1,
      pageSize: 3,
      total: 30,
      formLabelWidth: "120px",
      systemData: [],
      userGroup: [],
      tag: [],
      subjectTwoList: [],
      form2: {
        account: "",
        pwd: "",
        surePwd: "",
        realName: "",
        type: [],
        region: "",
        phone: "",
        birthday: "",
        idCard: "",
        address: "",
        organize: "",
        logo: "",
        subjectId: "",
      },
    };
  },
  methods: {
    handleClick(tab) {
      //  let res=await this.$http.order.findAllOrder({order_type:tab})
      // this.tableData=res.data.data
      // console.log(res.data);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },

    handleWrite(_id) {
      // this.$router.push({ path: "/home/update", query: { _id } });
    },
    async findAll(data) {
      let elem = {
        page: this.currentPage,
        limit: this.pageSize,
      };

      if (!this.input3 && this.activeName == -1) {
      } else if (this.activeName != -1 && !this.input3) {
        elem = { ...elem, type: this.activeName };
      } else if (this.input3 && this.activeName == -1) {
        if (this.select == "姓名") {
          elem = { ...elem, nickname: this.input3 };
        } else if (this.select == "手机号") {
          elem = { ...elem, phone: this.input3 };
        }
      } else {
        if (this.select == "姓名") {
          elem = { ...elem, nickname: this.input3, type: this.activeName };
        } else if (this.select == "手机号") {
          elem = { ...elem, phone: this.input3, type: this.activeName };
        } else {
          elem = { ...elem, type: this.activeName };
        }
      }

      const res = await this.$http.user.findUser(elem);

      //循环处理数据，每条数据pay_type按照要求修改中文
      const { data: req } = await this.$http.user.findUserLeave();
      const { data: group } = await this.$http.user.findUserGroup();
      const { data: tagAD } = await this.$http.user.findUserTag();
      console.log(res);
      this.tag = tagAD.data;
      this.systemData = req.data;
      this.userGroup = group.data;
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      console.log("每页显示" + val);
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      console.log("当前页码" + val);
      this.currentPage = val;
      this.findAll();
    },
    searchName() {
      switch (this.select) {
        case "全部":
          this.findAll();

          break;
        case "姓名":
          this.findAll({ nickname: this.input3 });

          break;
        case "手机号":
          this.findAll({ phone: this.input3 });

          break;
      }
    },
    subjectLevelOneChanged(value) {
      //value就是一级分类的id值
      //先遍历所有的分类 里面包含一级和二级
      for (let i = 0; i < this.tag.length; i++) {
        //每个一级分类
        let oneSubject = this.tag[i];
        //判断：所有一级分类id和点击一级分类id是否一样
        if (value === oneSubject._id) {
          //===即比较值 还要比较类型
          //从一级分类中获取所有的二级分类
          this.subjectTwoList = oneSubject.children;
        }
      }
    },

   async addUser() {
      if (
        this.form2.pwd &&
        this.form2.surePwd &&
        this.form2.pwd == this.form2.surePwd
      ) {
        let obj = {
          real_name: this.form2.account,
          phone: this.form2.phone,
          birthday: this.form2.birthday,
          id_card: this.form2.idCard,
          address: this.form2.address,

          password: this.form2.pwd,
          level_id: this.form2.region,
          group_id: this.form2.organize,
          tag_id_array: [this.form2.subjectId],
          is_promoter: this.spread,
          status: this.radio2,
        };
       let {data:res}=await this.$http.user.addUserAdmin(obj)
        this.findAll();
        this.dialogTableVisible = false;
        for (let key in this.form2) {
          this.form2[key] = "";
        }
        this.radio2 = 1;
       console.log(res);
      }
    },
  },
  created() {
    this.findAll();
  },
  watch: {
    activeName(newVal) {
      if (newVal == -1) {
        this.findAll();
      } else {
        let data = { type: newVal };
        this.findAll(data);
      }
    },
    select(newVal) {
      this.input3 = "";
    },
  },
};
</script>

<style lang='scss' scoped>
.main {
  .order-statu {
    margin-bottom: 10px;
    em {
      margin-right: 20px;
    }
  }
  .pay-method {
    margin-bottom: 10px;
    em {
      margin-right: 20px;
    }
  }
  .order-time {
    display: flex;
    margin-bottom: 20px;
    .left {
      height: 35px;
      margin-right: 200px;
      em {
        margin-right: 20px;
      }
      input {
        width: 200px;
        height: 100%;
        &::before {
          color: #a9a9a9;
          content: attr(placeholder);
        }
        &.full::before {
          color: black;
          content: "" !important;
        }
      }
    }
    .search {
      width: 100%;
      display: flex;
      align-items: center;
      span {
        margin-right: 20px;
      }
      .el-select {
        width: 110px;
      }

      button {
        border: none;
        width: 60px;
        height: 100%;
        margin-right: 5px;
        background-color: rgb(71, 140, 235) !important;
        color: white;
      }
    }
  }

  .order-other {
    margin-top: 20px;
    display: flex;
    .sure {
      width: 100px;
      height: 50px;
      background-color: green;
      text-align: center;
      line-height: 50px;
      margin-right: 20px;
    }
    .send {
      width: 100px;
      height: 50px;
      background-color: white;
      border: 1px solid gainsboro;
      text-align: center;
      line-height: 50px;
    }
  }
}

.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>